import React, { Component, Fragment } from 'react';
import { HashRouter as Router, Route, Switch, Redirect } from "react-router-dom";

import { localCityAction } from "./store/actionCreator";

import { connect } from "react-redux";

// 引入首页模块
import Home from "./pages/home";
// 引入 城市选择页面
import Citychooese from "./pages/citychooese";

// 地图找房
import Mapcity from "./pages/mapCity";

class App extends Component {
  componentDidMount() {
    this.props.handleInitCity();
  }
  render() {
    return (
      <Fragment>
        <div className="app">
          {this.props.cityName && <Router>
            <div className="content">
              <Switch>
                <Route path="/mapcity" component={Mapcity} ></Route>
                <Route path="/home" component={Home} ></Route>
                <Route path="/citychooese" component={Citychooese} ></Route>
                <Route exact path="/"  >
                  <Redirect to="/home"></Redirect>
                </Route>
              </Switch>
            </div>
          </Router>}

        </div>
      </Fragment>
    );
  }
}


const mapStoreToProps = (state) => {
  return {
    cityName: state.mapReducer.city.name
  }
}



// 事件的映射对象
const mapDispatchToProps = (dispatch) => {
  return {
    handleInitCity() {
      // localCityAction 是一个函数 
      dispatch(localCityAction());
    }
  }
}

export default connect(mapStoreToProps, mapDispatchToProps)(App);